import React from 'react';
import ContainerWrapper from '../Home/components/CompWrapper';
import LayoutWrapper from '../Home/components/LayoutWrapper';
import Common from './common';
import SelectIcon from '../Home/components/SelectIcon';
import BaseWrapper from '../Home/components/BaseWrapper';

export default class {
    zIndex = 1

    static extends = [Common]

    // 点击全局页面的时候，移除掉选中状态
    removeSelected = (e) => {
        const refs = this.models.page.get('refs');
        if (e.target === refs['content']) {
            this.models.page.set({
                selectContainer: null
            });
        }
    }

    // 弹出设置样式侧拉窗
    setStyle = () => {
        this.models.home.set({
            styleSettingVisible: true
        });
    }

    // 渲染配置
    // 组件都用特殊组件容器包裹，以方便设置组件
    renderConfig = (config) => {
        const [selectContainer, selectLayoutCell] = this.models.page.get(['selectContainer', 'selectLayoutCell']);

        // 组件数组
        let result = [];

        // 此处判断当前是否有聚焦的容器组件
        config.map((Item, index) => {
            if (!Item) {
                result.push(null);
                return;
            }

            // 表格容器组件的children的元素还是数组
            if (Array.isArray(Item)) {
                result.push(this.renderConfig(Item))
                return;
            }

            // 是否是当前选中的组件
            const active = selectContainer && selectContainer.id === Item.id;

            // 处理容器组件
            if (Item.type === 'Container') {
                result.push(
                    <ContainerWrapper
                        itemConfig={Item}
                        key={index}
                        deleteComponent={this.deleteComponent}
                        mouseDown={this.actions.drag.mouseDown}
                        setStyle={this.setStyle}
                        active={active}
                        style={Item.style ? Item.style : {}}
                        zIndex={this.zIndex}
                    >
                        <Item.component 
                            key={Item.id}
                            style={{
                                width: Item.style ? Item.style.width + 'px' : null,
                                height: Item.style ? Item.style.height + 'px' : null
                            }}
                        >
                            {Item.children ? this.renderConfig(Item.children) : null}
                        </Item.component>
                    </ContainerWrapper>
                );
            } 
            // 处理布局组件
            else if (Item.type === 'Layout') {
                result.push(
                    <LayoutWrapper
                        itemConfig={Item}
                        selectLayout={this.actions.layout.selectLayout(Item)}
                        key={index}
                        active={active}
                        setStyle={this.setStyle}
                        delComponent={this.deleteComponent}
                        customProps={Item.props ? Item.props : {}}
                        selectLayoutCell={selectLayoutCell}
                        selectArea={this.actions.layout.selectArea}
                        style={Item.style ? Item.style : {}}
                        zIndex={this.zIndex}
                        makeAreasList={this.makeAreasList}
                    >
                        <Item.component 
                            key={Item.id}
                            customProps={Item.props ? Item.props : {}}
                            childs={Item.children ? [...this.renderConfig(Item.children)] : null}
                            style={Item.style ? Item.style : {}}
                        >
                        </Item.component>
                    </LayoutWrapper>
                );
            }
            // 处理基础组件
            else if (Item.type === 'Base') {
                result.push(
                    <BaseWrapper
                        itemConfig={Item}
                        active={active}
                        key={index}
                        delComponent={this.deleteComponent}
                        setStyle={this.setStyle}
                        selectBase={this.actions.bca.selectBaseComponent(Item)}
                        zIndex={this.zIndex}
                    >
                        <Item.component
                            content={Item.props ? Item.props.content : null}
                        >
                        </Item.component>
                    </BaseWrapper>
                );
            }
        });

        this.zIndex = this.zIndex + 1;

        return result;
    }

    // 删除一个组件
    deleteComponent = (itemConfig) => {
        return () => {
            const [config, selectContainer] = this.models.page.get(['config', 'selectContainer']);

            this.deleteFromConfig(config, itemConfig.id);
            
            this.models.page.set({
                config: [...config],
                selectContainer: (!selectContainer || selectContainer.id === itemConfig.id) ? null : selectContainer
            });
        }
    }

    // 递归config，以删除组件配置
    deleteFromConfig = (config, id) => {
        if (Array.isArray(config)) {
            let index = config.findIndex(item => item && item.id === id);

            if (index > -1) {
                config.splice(index, 1);
            } else {
                config.forEach((item) => {
                    if (Array.isArray(item)) {
                        this.deleteFromConfig(item, id);
                    }
                    else if (item && item.children) {
                        this.deleteFromConfig(item.children, id);
                    }
                });
            }
        }
    }

    // 设置content的ref
    getContentPos = (ref) => {
        const refs = this.models.page.get('refs');

        refs['content'] = ref;

        this.models.page.set({
            refs: {...refs}
        });
    }
}